<%--
  Created by IntelliJ IDEA.
  User: 陈鹏
  Date: 2021/3/29
  Time: 20:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<html>
<head>
    <title>Title</title>
    <style>
        .novel-part{
            margin: 0 auto 0 auto;
            width: 800px;
            height: 700px;
            background-color: #b68a1d;
        }
        .novel-part .novel-title{
            margin: 0 auto 0 auto;
        }
        .remark-pox  .remark-table .remark-thead .remark-tr1 .remark-Dao .add-remark{
            margin-left: 500px;
        }
        .remark-pox  .remark-table .remark-thead .remark-tr1 .remark-Dao .add-remark a{
            text-decoration: none;
            color: red;
        }
        .remark-pox .remark-table{
            margin: 5px auto 0 auto;
            border: 1px solid black;
            width: 800px;
        }
        .remark-pox .remark-table .remark-tbody .remark-tr{
            /*background-color: red;*/
            border: 1px solid black;
        }
        .remark-pox .remark-table .remark-tbody .remark-tr .remark-td1{
            background-color: #ea9999;
            width: 200px;
        }
        .remark-pox .remark-table .remark-tbody .remark-tr .remark-td2{
            background-color: #f4f4f4;
        }
        .remark-pox .remark-table .remark-tbody .remark-tr .remark-td2 .content-contentFram .content{
            height: 50px;
        }
        .remark-pox .remark-table .remark-tbody .remark-tr .remark-td2 .content-contentFram .content-Dao .NovelReply-count{
            margin-left: 350px;
        }
        .remark-pox .remark-table .remark-tbody .remark-tr .remark-td2 .content-contentFram .content-Dao .NovelReply-count a{
            text-decoration: none;
            color: black;
        }
        .remark-pox .remark-table .remark-tbody .remark-tr .remark-td2 .content-contentFram .content-Dao .reply{
            /*margin-left: 380px;*/
        }
        .remark-pox .remark-table .remark-tbody .remark-tr .remark-td2 .content-contentFram .content-Dao .replyContent-fram .reply-content{
            margin-left: 250px;
        }
        .remark-pox .remark-table .remark-tbody .remark-tr .remark-td2 .content-contentFram .content-Dao .Towrite{
            background-color: #ea9999;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="novel-part">
    <h1 class="novel-title"></h1>
</div>
<div class="remark-pox">
    {{Test}}
    {{request}}
    <table class="remark-table">
        <thead class="remark-thead">
        <tr class="remark-tr1">
            <td class="remark-td0">用户</td>
        </tr>
        </thead>
        <tbody class="remark-tbody">
        <tr v-for="remark in remarks" class="remark-tr">
            <td class="remark-td1">
                <div class="remark-uid">{{remark.uid}}</div>
            </td>
            <td class="remark-td2">
                <div class="content-contentFram">
                    <div class="content">{{remark.content}}</div>
                    <div class="content-Dao">
<%--                        <span class="NovelReply-count"><a href="https://www.baidu.com">{{remark.replyCount}}条回复</a></span>--%>
                        <button class="NovelReply-count" @click="_lookAnswer(remark.rid)">{{remark.replyCount}}条回复</button>
<%--                        <span class="reply"><a href="/remark/toReply?rid=1011">回复</a></span>--%>
                        <button class="reply" @click="_toa(remark.rid)">回复</button>
                        <button class="delete-remark" @click="_deleteRemarkForNove(remark.rid)" v-show="remark.uid==uid">删除</button>
                        <a href="/remark/toWriteRemarkPage?nid=1005&uid=1366140090&chapterid&type=2&replyCount=0" class="Towrite">写评论</a>
                        <div class="replyContent-fram" v-show="replyFram==remark.rid">
                    <span><a href="/remark/addReply?nid">回复</a></span>--%>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <form action="/remark/deleSession" method="post">
        <p><input type="submit"> 忘记session</p>
    </form>
</div>
<script src="/comms/vue.js"></script>
<script src="/comms/jquery.js"></script>
<script>
    function request(url, method, fn, data) {
        $.ajax({
            url: url,
            data: data,
            method: method,
            dataType: "json",
            success: fn
        })
    }
</script>
<script>
    let v=new Vue({
        el:".remark-pox",
        data:{
            Test:"章节评论",
            remarks:[],
            nid:"1005",
            uid:"1366140090",
            chapterid:"",
            type:"2",
            chapterid:"",
            request:"/remark/toWriteRemarkPage?nid="+"1005"+"&uid="+"1815168807"+"&chapterid&type=2",
            replyFram:"",
            remarkFram:false,
        },
        created:function () {
            console.log("创建");
            this.initRemark();
        },
        methods: {
            initRemark: function (nid) {
                let this_ = this;
                request("/remark/selectRemarkForNovelById?nid=" + this.nid, "GET", function (data) {
                    if (data.flag) {
                        this_.remarks = data.data;
                    } else {
                        console.log("noData")
                    }
                })
            },

            /*删除总评*/
            _deleteRemarkForNove: function (id,uid) {
                let this_ = this;
                console.log(id)
                request("/remark/deleteRemarkForNovel?rid=" + id, "POST", function (data) {
                    if (data.flag) {
                        this_.initRemark(this_.nid);
                    } else {
                        console.log("deleteFailed")
                    }
                    this_.initRemark(this_.nid);
                })
            },
            _click: function () {
                console.log(this.test)
            },
            _replyNovlRemark:function (rid) {
                this.replyFram=rid;
            },

            _addReply:function (rid) {
                let this_=this;
                request("/remark/addReply?rid=" + rid, "POST", function (data) {
                    if (data.flag) {
                        this_.initRemark(this_.nid);
                    } else {
                        console.log("deleteFailed")
                    }
                    this_.initRemark(this_.nid);
                })
            },
            _toa:function (rid) {
                location.href="/remark/toReply?rid="+rid;
            },
            _lookAnswer:function (rid) {
                console.log(rid)
                location.href="/remark/toselectAnswer?rid="+rid;
            }
        },

    })
</script>
</body>
</html>
